<template>
  <div class="home-header">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <i class="el-icon-search"></i>
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of imgList" :key="item.id">
        <img :src="item.url" class="swiper-img">
      </swiper-slide>
      <!--<div class="swiper-button-prev" slot="button-prev">-->
        <!--<i class="el-icon-arrow-left"></i>-->
      <!--</div>-->
      <!--<div class="swiper-button-next" slot="button-next">-->
        <!--<i class="el-icon-arrow-right"></i>-->
      <!--</div>-->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
    export default {
      name: "home-header",
      data(){
        return{
          input: '',
          swiperOption: {
            pagination:{
              el: '.swiper-pagination'
            },
            loop: true,
            autoplay: true,
            // navigation: {
            //   nextEl: '.swiper-button-next',
            //   prevEl: '.swiper-button-prev',
            // },
          },
          imgList: [
            {
              id: '01',
              url: 'http://p1.music.126.net/7N2n7cHVGRd9IJGn-kS79w==/109951163645087710.jpg'
            },
            {
              id: '02',
              url: 'http://p1.music.126.net/3cyDU_KT01Lni9PY8kouYw==/109951163649404185.jpg'
            },
            {
              id: '03',
              url: 'http://p1.music.126.net/MEl979XoEzg_llrPrLPr4w==/109951163649396809.jpg'
            },
            {
              id: '04',
              url: 'http://p1.music.126.net/g6WLzJriqy8OreY5Y8UXrA==/109951163642515765.jpg'
            }
          ]
        }
      },
    }
</script>


<style lang="stylus" scoped>
  .home-header >>> .swiper-button-next, .swiper-button-prev
    background: rgba(229, 229, 229, .6);
  .home-header >>> .swiper-pagination-bullet-active
    background : #fff
  .home-header >>>.swiper-pagination-bullets
    bottom 18px
  .home-header >>> .el-input__inner
    font-size: 12px;
    height: 1.5rem;
    border-radius: 25px;
    line-height: 25px;
    outline: 0;
    padding: 0 10px 0 15px;
    bottom 18px
    color: #000
    background: rgba(255, 255, 255, .6);
  .home-header >>> .el-input__inner::placeholder
    color: #666
  .home-header >>> .el-icon-search
    position: absolute;
    z-index: 3;
    border: 0;
    background: none;
    right: 14%;
    top: 2.6%;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
  .home-header
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 45.87%
    background: #eee
    .el-input
      position: absolute;
      width: 80%;
      left: 10%;
      top:2%;
      z-index: 3;
    .swiper-img
      width: 100%
    .el-icon-arrow-left, .el-icon-arrow-right
      font-size: 27px;
      position: relative;
      top: 0.5rem;
      left: 0.1rem;
      color: #333;
    .el-icon-arrow-right
      left: .1rem;
</style>

